import './index.css'
import { Button, Flex,Input, Carousel  } from 'antd';
import React, { useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
let Design = () => {
  const [currentId1, setCurrentId1] = useState(1)
  const options1 = [
    { label: "模板", id: 1 },
    { label: "样式", id: 2 },
    ]
  const changeId1 = (id) => {
    setCurrentId1(id)
  }
  const img1 = [
    {
    img:'https://template.canva.cn/EAGLK4zYjfg/1/0/283w-h67a3GXqMKc.jpg'
    },
     {
    img:'https://template.canva.cn/EAGLAh2S0-I/1/0/566w-4BJytPvSPFA.jpg'
    },
     {
    img:'https://template.canva.cn/EAFr22cLAOI/1/0/566w-iAJEiNrEhHA.jpg'
    },
    {
    img:'https://template.canva.cn/EAGKWQszSL8/3/0/566w-vYBQMsCgLPI.jpg'
    },
   
  ]
    return (
      <div>
                            <Input prefix={<SearchOutlined />} style={{ width: '90%', height: '40px', margin: '20px' }} placeholder="Basic usage" />
                            {options1.map((item) => {
                          return (
                              <div key={item.id} onClick={() => changeId1(item.id)} className={item.id == currentId1 ? "active" : ""}>
                                      <div className='mbystype' style={{float:'left'}}>{item.label}</div>
                            </div>
          )
                            })}
                {/* 模板 */}
                <div style={{width:'100%',height:'517px',overflowX:'hidden',
    overflowY: 'scroll'}}> 
          <div style={{ display: currentId1 == 1 ? "block" : "none", margin: '20px 0px 0px 0px' }}>
                            <Carousel arrows infinite={false} dots={false}>
      <div style={{width:'100%'}}>
                        <Button ghost style={{ margin: '5px' }} >促销海报</Button>
                        <Button ghost style={{ margin: '5px' }} >优惠</Button>
                        <Button ghost style={{ margin: '5px' }} >双十一</Button>
                        <Button ghost style={{ margin: '5px' }} >福利</Button>        
      </div>
      <div>
        <Button ghost style={{ margin: '10px' }} >商品</Button>
                        <Button ghost style={{ margin: '10px 2px' }} >购物</Button>
                        <Button ghost style={{ margin: '10px 2px' }} >电商</Button>
                        <Button ghost style={{ margin: '10px 2px' }} >营销</Button> 
                        <Button ghost style={{ margin: '10px 2px' }} >广告</Button> 
      </div>
      <div>
                        <Button ghost style={{ margin: '10px 5px' }} >购物</Button>
                        <Button ghost style={{ margin: '10px 5px' }} >电商</Button>
                        <Button ghost style={{ margin: '10px 5px' }} >营销</Button> 
                        <Button ghost style={{ margin: '10px 5px' }} >广告</Button>
                        <Button ghost style={{ margin: '10px 5px' }} >主图</Button>
      </div>
                    </Carousel>
                    <b style={{color:'white'}}>所有结果</b>
                    <div style={{ width: '100%', height: '100%', marginTop: '20px' }}>
                      {/* <img className='draggable-img' src='https://template.canva.cn/EAGLK4zYjfg/1/0/283w-h67a3GXqMKc.jpg' style={{ width: '47%',margin:'5px' }} /> */}
              {
                img1.map((item, index) => {
                  return (
                    <div key={index}>
                      <img  src={item.img} style={{ width: '47%', margin: '5px',float:'left' }} draggable onDragEnter={(e) => {
                      e.dataTransfer.setData('text/plain',`${item.img}`)
                      }} />
                    </div>
                )
                })
              }         
            </div>

                  </div>
                  {/* 样式 */}
                  <div style={{ display: currentId1 == 2 ? "block" : "none" }}>
                  <div style={{width:'100%',height:'120px'}} >
                      <b style={{color:'#fff',width:'100%',height:'20px',float:'left'}}>配色字体组合</b>
                      <div style={{ width: '110px', height: '90px', background: '#E5E5E5', borderRadius: '15px',float:'left',margin:'5px 30px 5px 30px' }}></div>
                      <div style={{ width: '110px', height: '90px', background: '#E5E5E5', borderRadius: '15px',margin:'5px 30px 5px 30px',float:'left' }}></div>
                    </div>
                     <div style={{width:'100%',height:'120px',marginTop:'15px'}} >
                      <b style={{color:'#fff',width:'100%',height:'20px',float:'left'}}>调色板</b>
                      <div  style={{ width: '110px', height: '90px', background: '#E5E5E5', borderRadius: '15px',float:'left',margin:'5px 30px 5px 30px' }}></div>
                      <div style={{ width: '110px', height: '90px', background: '#E5E5E5', borderRadius: '15px',margin:'5px 30px 5px 30px',float:'left' }}></div>
                    </div>
                     <div style={{width:'100%',height:'120px',marginTop:'15px'}} >
                      <b style={{color:'#fff',width:'100%',height:'20px',float:'left'}}>字体集</b>
                      <div style={{ width: '110px', height: '90px', background: '#E5E5E5', borderRadius: '15px',float:'left',margin:'5px 30px 5px 30px' }}></div>
                      <div style={{ width: '110px', height: '90px', background: '#E5E5E5', borderRadius: '15px',margin:'5px 30px 5px 30px',float:'left' }}></div>
                    </div>
                  </div>
                </div>
        </div>
)
}

export default Design